既然現在網頁前端已經可以作爲前端介面使用，有需要特別需求在考慮原生開發會是一個不錯的方向。網頁前端開發的好處是快速、簡單、容易跨平臺，缺點就是效能上可能會有些損失，並有些限制。不過近來瀏覽器連GPU都可以調用了，就算不行，以網頁作爲Prototype(原型)開發，我認爲也是非常好的選項。隨者JS的強大，網頁上可以嘗試一些模擬，最後在決定是否開發原生程式。好了，該來說說一些網頁佈局、物件相關的框架吧！這之中會包含知名的和一些覺得蠻有趣的給各位看官參考參考囉～

HTML5標籤

在正式提到有用的框架前，我想再回頭來提提HTML5的標籤。目前絕大部分CSS框架要不是利用HTML標籤裡Class的屬性，就是後來的data-X屬性、或是其他自定義的屬性。不過從HTML4.0到現在包含JS的HTML5，看到一些可能性，未來的框架發展也許會朝另一種形式發展。OK，來說說吧。

<button></button>標籤我想大家都知道，HTML5有許多標籤自己本身帶有意義，像是<section>、<article>、<footer>、<header>、<beside>和<nav>等等。有些預計未來會再說到，不過回頭說說<button></button>。原本要建立一個button物件，應該寫法會是<input type="button" />，也就是用input標籤去帶一個type屬性，舊版本的瀏覽器甚至不認識button標籤(我應該沒記錯，歡迎打臉)。從input到button，再來看看正在制定的標準customElement.define()，或許未來的網頁框架會直接用標籤方式處理。

Bootstrap

Bootstrap，目前最知名的框架之一(感覺應該是沒有之一....)。有許多框架在Bootstrap基礎上再做開發的。目前版本已經來到Bootstrap4。

可以只引入CSS：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

不過只引入CSS會有些物件無法完整使用，所以可以再多引入JS, Popper.js, and jQuery：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Semantic UI

Semantic UI同樣是非常多人使用的UI框架。我是被人帶去用的XD只知道Glup的方式，但也不熟。

Flat UI

前幾年Apple大力推廣的扁平化風格，Flat UI就是一個實現。

Metro 4

Metro是Windows 8的設計風格，Metro 4。不過我會比較推薦另外一個(雖然兩個我都沒用過就是)。

幾個有趣的DEMO頁面

• Login Page
• Start Page

BootMetro

BootMetro基於Bootstrap的Metro實現。直接看看DEMO吧。

Pure CSS

Pure CSS也會是我大推的一個框架。上面幾個爲了實現某些複雜的功能，都要引入JS，相對來說也就變得複雜、龐大。而Pure CSS如同名之所意，就是只有純粹CSS，這也意味著簡單容易使用，同時也不適合需要服雜功能的情況，但相對在單純的應用，會是非常好的選擇。只需要引入CSS：

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

幾個有趣的框架就留下次說北。